<template>
  <q-scroll-area ref="ScrollArea" :thumb-style="{ opacity: 0.1 }" :verticalOffset="[12, 12]" :visible="false"
                 class="absolute-full q-pt-md q-pl-md">
    <div class="row q-col-gutter-md">
      <div class="col-12 row q-col-gutter-md"></div>
      <div class="col-12 row q-col-gutter-md">
        <div class="col-lg-3 col-md-6 col-xs-12 col-sm-6 ratio165">
          <AGVStatusStatistics :rowInfo="statusInfo" classes="fit"></AGVStatusStatistics>
        </div>
        <div class="col-lg-3 col-md-6 col-xs-12 col-sm-6 ratio165">
          <AGVRunningStatistics v-model:rowInfo="runStatistics" classes="fit"></AGVRunningStatistics>
        </div>
        <div class="col ratio165">
          <AGVUseRatio classes="fit"></AGVUseRatio>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-md">
        <div class="col-lg-6 col-md-12 col-xs-12 col-sm-12 ratio165">
          <TasksStatistics classes="fit" nonSearch></TasksStatistics>
        </div>
        <div class="col ratio165">
          <AGVRunningAnalysis classes="fit" nonSearch></AGVRunningAnalysis>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-md">
        <div class="col-lg-6 col-md-12 col-xs-12 col-sm-12 ratio165">
          <AGVGanttChart classes="fit"></AGVGanttChart>
        </div>
        <div class="col ratio165">
          <AGVHeatMap classes="fit"></AGVHeatMap>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>
<script setup>
import AGVGanttChart from 'src/views/AGVCore/AGVGanttChart.vue'
import AGVHeatMap from 'src/views/AGVCore/AGVHeatMap.vue'
import AGVRunningAnalysis from 'src/views/AGVCore/AGVRunningAnalysis.vue'
import AGVRunningStatistics from 'src/views/AGVCore/AGVRunningStatistics.vue'
import AGVStatusStatistics from 'src/views/AGVCore/AGVStatusStatistics.vue'
import AGVUseRatio from 'src/views/AGVCore/AGVUseRatio.vue'
import TasksStatistics from "src/views/TaskCore/TasksStatistics.vue"
import { userStores } from 'stores/user-stores.js'
import { postAPI } from 'src/api'
import { onMounted, ref } from 'vue'

const userStore = userStores()
const AreaHeight = ref(0)
const statusInfo = ref({})
const ScrollArea = ref(null)
const runStatistics = ref({})

const initStatusStatistics = () => {
  postAPI('/tpm/yfagv/api/largeScreen/status', {}, res => {
    const {
      agvAbnormalNum: EMERGENCY, agvChargeNum: CHARGING, agvFreeNum: IDLE, agvNum: TOTALS, agvOffLineNum: OFFLINE,
      agvRunningNum: RUNNING, agvSumDistance, agvSumDuration, agvTaskNum
    } = res
    runStatistics.value = { agvSumDistance, agvSumDuration, agvTaskNum }
    statusInfo.value = { EMERGENCY, CHARGING, IDLE, OFFLINE, RUNNING, TOTALS }
  }, () => { })
}

onMounted(() => {
  initStatusStatistics()
  userStore.SET_BREADCRUMBS({})
  if (ScrollArea.value) AreaHeight.value = `calc(${ScrollArea.value.$el.clientHeight / 3}px - ${0.75 / 3}rem)`
})
</script>
<style lang="scss" scoped>
.ratio165 {
  height: v-bind(AreaHeight);
  //aspect-ratio: 16/5;
  min-height: 15rem;
  max-height: 28rem;
}
</style>